<template>
	<!-- <view class="container" style="width: 750rpx;height: 90vh;overflow: auto;"> -->
	<view class="container">
	<!-- 	<view class="notice" @click="trunInformation('4')">
			<uni-notice-bar show-icon :text="notice.title" />
		</view> -->
		<!-- 轮播图 -->
		<view class="top">
			<swiper @change="swiperChange" style="width: 750rpx;height: 212px;" :indicator-dots="true" :autoplay="true" :interval="interval" :duration="1000" circular="true">
				<swiper-item :item-id="item.videourl?'video': 'image' + item.advPlatinfosId" style="width: 100%;height: 100%;" v-for="item in swiperItem" :key="advPlatinfosId" @click="checkInfo(item.advPlatinfosId)">
					<view v-if="item.videourl" style="width: 100%;height: 100%;" class="swiper-item">
						<video class="livePlayer"
							:src="baseUrl + item.videourl"
							:autoplay="true"
							:muted="false"
							:loop="true"
							:controls="false"
							style="width: 100%;height: 100%;">
						</video>
					</view>
					<view v-else style="width: 100%;height: 100%;" class="swiper-item">
						<image style="width: 100%;height: 100%;" class="logo" 
							:src="baseUrl+item.photoimage">
						</image>
					</view>
				</swiper-item>
<!-- 				<swiper-item style="width: 100%;height: 100%;" v-for="item in swiperItem" :key="advPlatinfosId" @click="checkInfo(item.advPlatinfosId)">
					<view style="width: 100%;height: 100%;" class="swiper-item">
						<image style="width: 100%;height: 100%;" class="logo" 
							:src="baseUrl+item.photoimage"></image>
					</view>
				</swiper-item> -->
			</swiper>
		</view>
		<!-- 广告图 -->
		<view class="advert">
			<view class="advert-img" @click="checkInfo(advert.advPlatinfosId)">
				<image class="advert-img-logo" 
				:src="baseUrl+advert.photoimage"></image>
			</view>
		</view>
		<!-- 健康资讯 -->
		<view class="active" style="box-sizing: border-box; width: 750rpx; padding: 0 10px;">
			<!-- 健康资讯头部 -->
			<view class="active-top flex-row" style="box-sizing: border-box; width: 100%;height: 40px;">
				<text
					class="active-text"
					style="font-size: 20px;font-weight: bold;line-height: 40px;">
					禅意动态
				</text>
				<view class="icon">
					<!-- <uni-icons
						type="settings" 
						size="30"
						@click="trunInformation('3')">
					</uni-icons> -->
					<text @click="trunInformation('3')">更多</text>
				</view>
			</view>
			<!-- 健康资讯, 大的一项列表 -->
			<!-- <view class="active-big">
				<view class="active-big-title" style="width: 100%;line-height: 20px;margin-bottom: 10px;">
					今年的橘子成熟了吗?
				</view>
				<view class="active-big-video" style="width: 100%;overflow: hidden;">
					<video 
						style="width: 100%;height: 200px;"
						src="http://vd3.bdstatic.com/mda-ki3kgcdijkaz4prs/v1-cae/1080p/mda-ki3kgcdijkaz4prs.mp4">
					</video>
				</view>
				<view class="active-big-bottom" style="font-size: 12px;color: #aaa;
					width: 100%;height: 20px;line-height: 20px;">
					<text class="active-big-bottom-text read" style="margin-right: 15px;">阅读 {{ bigActive.read }}</text>
					<text class="active-big-bottom-text good">赞 {{ bigActive.good }}</text>
				</view>
			</view> -->
			<!-- 健康资讯 列表 -->
			<view class="active-list"
				  style="width: 100%;">
				<view v-for="item in activeList" :key="advPlatinfosId" @click="checkInfo(item.advPlatinfosId)">
					<!-- 列表项 -->
					<view class="active-list-item flex-row" style="width: 100%;height: 100px;border-bottom: 1px solid #aaa;">
						<!-- 左边图片 -->
						<view class="active-list-item-image" style="width: 100px;height: 80px;">
							<image :src="baseUrl+item.photoimage" style="width: 80px;height: 80px;"></image>
						</view>
						<!-- 右边内容 -->
						<view class="active-list-item-right flex-column" style="flex: 1; height: 80px;align-items: flex-start;">
							<!-- 正文 -->
							<view class="item-right-content" style="height: 60px; font-weight: 550;">
								{{item.title}}
							</view>
							<!-- 底部 -->
							<view class="item-right-bottom flex-row" style="width: 100%; height: 20px; font-size: 12px;color: #aaa;">
								<!-- 日期 -->
								<view class="bottom-data">
									<text class="bottom-data-text">{{formatDateTime(item.pubDatetime)}}</text>
								</view>
								<!-- 阅读点赞量 -->
								<view class="bottom-info">
									<!-- <text class="bottom-info-read" style="margin-right: 10px;">
										阅读 6.2万
									</text> -->
									<text class="bottom-info-good">
										赞 {{item.plikes}}
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 专家直播 -->
		<view v-if="borderSwitch==1"  class="live" style="box-sizing: border-box; width: 750rpx; padding: 0 10px;">
			<!-- 头部标题 -->
			<view class="live-top flex-row" style="box-sizing: border-box; width: 100%;height: 40px;">
				<text
					class="live-text"
					style="font-size: 20px;font-weight: bold;line-height: 40px;">
					早晚课直播
				</text>
				<view class="icon">
					<!-- <uni-icons
						type="settings" 
						size="30"
						@click="moreLive">
					</uni-icons> -->
					<text @click="moreLive">更多</text>
				</view>
			</view>
			<!-- 列表区域 -->
			<view class="live-list flex-row-graid" style="width: 100%;">
				<view v-for="item in liveList" :key="item.advBroadcastId" @click="clickLiving(item)">
					<view class="live-list-item" style="width: 330rpx;height: 235px;margin-bottom: 15px;
														position: relative;box-shadow: 0 0 10px 0 #ccc;
														border-radius: 10px;overflow: hidden;background-color: white;">
						<!-- 大图 -->
						<view class="live-list-item-bigimg" style="width: 100%;height: 160px;">
							<image :src="baseUrl+item.image" style="width: 100%;height: 100%;"></image>
						</view>
						<!-- 直播信息 -->
						<view class="live-list-item-info">
							<view class="info-title flex-column-around" style="width: 100%;height: 40px;text-align: center;padding: 5px 0;box-sizing: border-box;">
								<text>{{ item.title }}</text>
							</view>
							<view class="info-liver" style="width: 100%;height: 30px;display: flex;justify-content: start;align-items: center;">
								<view class="info-liver-icon" style="width: 30px;height: 30px;margin-left: 60rpx;">
									<image :src="item.memberImg" style="width: 100%;height: 100%;"></image>
								</view>
								<view class="info-liver-nickname" style="height: 30px;text-align: center;line-height: 30px;color: #aaa;margin-left: 30rpx;">
									<text>{{ item.memberName }}</text>
								</view>
							</view>
						</view>
						<!-- 标签 -->
						<view :class="{'live-label': 1===1,'live-label-y': item.broadstatus===3,'live-label-ok': item.broadstatus===2,'live-label-living': item.broadstatus===1}">
							{{ item.broadstatus === 1 ? '直播中' : item.broadstatus === 2 ? '未开播' : '已停播' }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import request from '../../utils/request.js';
	import { loginSystem } from '/api/login.js'
	import { BASE_IMAGE_URL, BASE_URL, GET_USER_INFO } from '/utils/CommonValues.js'
	export default {
		data(){
			return{
				interval: 3000, // 轮播图轮播时间, 单位毫秒
				borderSwitch: 0,
				baseUrl: '',
				token: "",
				userInfo: {},
				swiperItem: [], // 轮播图
				advert: [], // 广告图
				activeList: [], // 健康资讯
				notice: [], // 通知
				bigActive: {
					read: '7.5万', // 阅读量
					good: '3624' //点赞量
				},
				activitiesList: [
					{
						infoTitle: '印花集',
						pubDate: 'nothing',
						infoImg: 'https://img1.baidu.com/it/u=1466457355,1217612568&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1716051600&t=28f943336888be4d082f6b241fd0f785'
					}
				],
				liveList: []
			}
		},
		onShareTimeline() {
			return {
			  title: '释镜文化',
			  path: `/pages/index/index`,
			};
		},
		onShareAppMessage(res) {
		    // 返回自定义分享内容
		    return {
		      title: '释镜文化',
		      path: `/pages/index/index`,
		    };
		},
		onLoad() {
			this.baseUrl = BASE_IMAGE_URL;
			this.login();
			GET_USER_INFO().then(response => {
				this.userInfo = response;
				this.getBorderSwitch();
				setInterval(() => {
					this.getBorderSwitch();
				}, 2000);
				if(this.userInfo.advMembersId) {
					// 如果获取到本地有用户登录记录, 就发送请求验证是否被拉黑[校验用户信息]
					// request.POST('/system/members/app_login', this.userInfo).then(response => {
					// 	console.log(response, "响应");
					// 	if(response.data) {
					// 		var info = response.data;
					// 		// 把信息存入 Storage
					// 		uni.setStorage({
					// 			key: 'app_user_info',
					// 			data: JSON.stringify(info)
					// 		})
					// 	} else {
					// 		uni.showToast({
					// 			title: response.message,
					// 			icon: 'error'
					// 		})
					// 		uni.removeStorage({
					// 			key: 'app_user_info'  
					// 		})
					// 	}
					// }).catch(error => {
					// 	console.log(error);
					// 	uni.showToast({
					// 		title: '登录信息异常',
					// 		icon: 'error'
					// 	})
					// 	uni.removeStorage({
					// 		key: 'app_user_info'
					// 	})
					// })
				}
			})
		},
		onShow() {
			GET_USER_INFO().then(response => {
				this.userInfo = response;
				this.getLiveList();
			})
		},
		methods: {
			swiperChange(e) {
				const detail = e.detail;
				if(detail.currentItemId == 'video') {
					this.interval = 10000;
				} else {
					this.interval = 3000;
				}
			},
			getBorderSwitch() {
				request.GET(`/system/company/list`)
					   .then(response => {
						   // console.log(response, "导航信息")
						   this.borderSwitch = response.rows[0].broadSwitch
						   if(this.borderSwitch==0) {
						   	uni.setTabBarItem({
						   		index: 3,
						   		text: '资讯',
						   		success() {
						   			// console.log("隐藏成功")
						   		},
						   		fail() {
						   			// console.log("隐藏失败")
						   		}
						   	})
						   } else {
							   uni.setTabBarItem({
							   	index: 3,
							   	text: '直播',
							   	success() {
							   		// console.log("隐藏成功")
							   	},
							   	fail() {
							   		// console.log("隐藏失败")
							   	}
							   })
						   }
					   })
			},
			formatDateTime(isoString) {
			  // const date = new Date(isoString);
			  // const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
			  // const formatter = new Intl.DateTimeFormat('zh-CN', options);
			  // return formatter.format(date);
			  return isoString.replace('T', '  ')
			},
			clickLiving(live) {
				/*
					首先判断当前的直播状态
						如果是为开播状态
							直接进入直播
						如果是未开播状态
							首先需要判断当前直播是否已经预约
							如果没有预约那么就弹窗显示 是否要预约该直播
							如果已经预约了就显示直播暂未开始
				 */	
				if(live.broadstatus == 1) {
					// 直播中 直接进入直播
					uni.navigateTo({
						url: '/pages/live/playing/playing?broadUrl=' + live.broadUrl
					})
				}
				if(live.broadstatus == 2) {
					// 未开播
					// 查询是否已经预约该直播
					if(!this.userInfo.advMembersId) {
						uni.showModal({
							content: '请先登录'
						})
						return;
					}
					GET_USER_INFO().then(response =>{
						request.GET(`/system/reservbroadcast/isreservation/${response.advMembersId}/${live.advBroadcastId}`)
							   .then(res => {
								   if(res.data) {
									   // 表示已经预约了
									   uni.showModal({
									   	title: '提示',
									   	content: '直播未开始',
									   	confirmText: '确定'
									   })
								   } else {
									   // 未预约, 询问是否需要预约
									   uni.showModal({
									   	title: '提示',
									   	content: '直播未开始, 是否预约直播',
									   	showCancel: true,
									   	confirmText: '预约',
									   	success: (res) => {
									   		var yes = res.confirm;
									   		if(yes) {
									   			// 点击了预约按钮
												request.POST(`/system/reservbroadcast`, {
													advMembersId: response.advMembersId,
													advBroadcastId: live.advBroadcastId
												}).then(r => {
													uni.showToast({
														title: '预约成功',
														icon: 'none'
													})
													uni.reLaunch({
														url: '/pages/live/live?page=3'
													})
												})
									   		}else {
									   			// 点击了取消按钮
									   		}
									   	}
									})
								   }
							   })
					})
				}
				if(live.broadstatus == 3) {
					// 已停播
					uni.showModal({
						title: '提示',
						content: '当前直播已结束',
						confirmText: '确定'
					})
				}
			},
			// 资讯数据查询
			getSwiper(type) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: `${BASE_URL}/system/platinfos/list`,
						method: 'GET',
						data: {
							infoSection: type
						},
						dataType: 'json',
						header: {
							"Content-Type": "application/json;charset=utf-8",
							"Authorization": this.token
						},
						success: (response) => {
							// 如果请求成功，解析响应数据并调用 resolve  
							if (response.data && response.statusCode === 200) { 
								console.log(response, '资讯数据')
								resolve(response.data.rows);
							} else {  
								reject('Error fetching data');  
							}
						},
						fail: (error) => {
							reject(error);
						}
					})
				})
			},
			// 获取直播列表
			getLiveList() {
				uni.request({
					url: `${BASE_URL}/system/broadcast/list/app`,
					method: 'GET',
					data: {
						isAudit: 1
					},
					dataType: 'json',
					header: {
						"Content-Type": "application/json;charset=utf-8",
						"Authorization": this.token
					},
					success: (response) => {
						// 如果请求成功，解析响应数据并调用 resolve  
						if (response.data && response.statusCode === 200) { 
							console.log(response, '直播列表')
							this.liveList = response.data.rows;
						} else {  
							uni.showToast({
								title: '直播列表获取失败',
								icon: 'none'
							})
						}
					},
					fail: (error) => {
						uni.showToast({
							title: '直播列表获取失败',
							icon: 'none'
						})
					}
				})
			},
			// 登录
			login() {
				// 登录[获取token]
				uni.request({
					method: 'GET',
					url: `${BASE_URL}/captchaImage`,
					dataType: 'json',
					success: res => {
						this.uuid = res.data.uuid
						this.code = res.data.codeStr
						const data = {
							"username": "admin",
							"password": "admin123",
							"uuid": this.uuid,
							"code": this.code
						}
						var str = JSON.stringify(data)
						uni.request({
							method: 'POST',
							url: `${BASE_URL}/login`,
							header: {
								"Content-Type":"application/json;charset=UTF-8"
							},
							data: str,
							dataType: 'json',
							success: res => {
								if(res.data.code == '200') {
									this.token = res.data.token;
									this.getSwiper('1').then((data) => {
										this.swiperItem = data;
									})
									this.getSwiper('2').then((data) => {
										this.advert = data[0]; // 广告图默认取第一个
									})
									this.getSwiper('3').then((data) => {
										if(data.length <= 4){
											this.activeList = data;
										} else {
											for(let i = 0; i < 4; i++) {
												this.activeList.push(data[i]);
											}
										}
									})
									this.getSwiper('4').then((data) => {
										this.notice = data[0]; // 通知默认第一个
										this.startRunNotice(data);
									})
									this.getLiveList();
								} else {
									uni.showToast({
										title: '连接到服务器失败',
										icon: 'error'
									})
								}
							}
						})
					}
				})
			},
			// 控制内容通知的内容切换
			startRunNotice(data) {
				var i = 0;
				setInterval(() => {
					if(i >= data.length) {
						i = 0;
					}
					this.notice = data[i];
					i++;
				}, 20000)
			},
			getMore() {
				uni.showToast({
					title: '点击查看更多',
					icon: 'none'
				})
			},
			// 跳转到资讯 type: 资讯的类型
			trunInformation(type) {
				uni.navigateTo({
					url: '/pages/index/information/information?type='+type
				})
			},
			// 跳转到资讯详情
			checkInfo(id) {
				uni.navigateTo({
					url: '/pages/index/informationDetails/informationDetails?id='+id
				})
			},
			// 跳转到直播
			moreLive() {
				uni.switchTab({
					url: '/pages/live/live'
				})
			}
		}
	}
</script>


<style lang="less">
.content {
	position: relative;
	width: 750rpx;
}
.flex-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flex-column {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
}
.flex-column-around {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.flex-row-graid {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.notice {
	position: sticky;
	top: 0;
	width: 750rpx;
	height: 30px;
	background-color: moccasin;
	color: black;
	z-index: 999;
	margin-bottom: 10px;
}
.top {
	width: 750rpx;
	height: 220px;
}
.logo {
	width: 100%;
	height: 150px;
	margin-left: auto;
	margin-right: auto;
}
.advert {
	width: 750rpx;
	height: 200px;
}
.advert-img {
	width: 100%;
	height: 100%;
}
.advert-img-logo {
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}
.live-label {
	padding: 0px 5px;
	color: white;
	font-size: 12px;
	line-height: 20px;
}
.live-label-y, .live-label-ok {
	position: absolute;
	left: 0;
	top: 0;
	border-top-left-radius: 10px;
	background-color: red;
}
.live-label-living {
	position: absolute;
	right: 0;
	top: 0;
	border-top-right-radius: 10px;
	background-color: limegreen;
}
</style>
